<template>
    <div class="goodContainer">
        <!-- swipe -->
        <van-swipe :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in product.swipeImg" :key="item.id">
                <img :src="item.imageUrl">
            </van-swipe-item>
        </van-swipe>
        <!-- quality -->
        <ul class="product-quality">
            <li>
                <img src="">
                <span>正品保证</span>
            </li>            
            <li>
                <img src="">
                <span>厂家直供</span>
            </li>            
            <li>
                <img src="">
                <span>满79包邮</span>
            </li>
        </ul>
        <!-- group -->
        <van-cell>
            <div class="price"><small>¥</small>{{(product.proInfo.marketPrice * 0.01).toFixed(2)}}</div>
            <div class="name">{{product.proInfo.productName}}</div>
            <div class="slogn">【买正品药 上健客】</div>
            <div class="details">{{product.proInfo.introduction}}</div>
            <div class="tip">本品为处方药，请凭处方笺购买；健客网上药店只对处方药提供信息展示，不提供交易。</div>
        </van-cell>
        <!-- card -->
        <div class="cardBox">
            <div class="card">
                <span class="vertical">领券</span>
                <span class="cont">
                    <i class="tag">满399减50</i>
                    <i class="tag">满299减20</i>
                </span>
                <van-icon name="ellipsis" slot="right" class="icon" />
            </div>
            <div class="card">
                <span class="vertical">促销</span>
                <span class="cont">
                    <p><i class="tag">优惠</i>{{product.promotions ? product.promotions.item.promotions : ''}}</p>
                    <p><i class="tag">赠品</i>买1件赠以下商品，送完为止</p>
                </span>
                <van-icon name="ellipsis" slot="right" class="icon" />
            </div>
            <div class="card">
                <span class="vertical">疗程</span>
                <span class="cont">
                    <span class="txt">{{product.promotions ? product.promotions.item.therapy : ''}}</span>
                </span>
                <van-icon name="ellipsis" slot="right" class="icon" />
            </div>
        </div>
        <div class="cardBox">
            <div class="card">
                <span class="vertical">规格</span>
                <span class="cont">
                    <span class="packings">
                        <span>{{product.proInfo.packing}}</span>
                        <span>1盒</span>
                    </span>
                </span>
                <van-icon name="ellipsis" slot="right" class="icon" />
            </div>
        </div>
        <div class="cardBox">
            <div class="card">
                <span class="vertical">厂商</span>
                <span class="cont">
                    <div class="txt">{{product.proInfo.manufacturer}}</div>
                </span>
            </div>
        </div>
        <div class="cardBox">
            <div class="card">
                <span class="vertical">说明</span>
                <span class="cont">
                    <div class="server-list">
                        <span>正品保证</span>
                        <span>药监认证</span>
                        <span>满79包邮</span>
                        <span>花呗分期</span>
                        <span>健客自营</span>
                    </div>
                </span>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    computed: {
        ...mapState(['product'])
    },
    mounted() {
        document.body.clientWidth
    }
}
</script>

<style lang="scss">
    .goodContainer {
        // swipe
        background: #f5f5f5;
        .van-swipe {
            background: #fff;
            .van-swipe-item {
                line-height: 0;
                img {
                    width: 80%;
                }
            }
        }
        // quality
        .product-quality {
            width: 100%;
            height: .4rem;
            background: #3fadff;
            display: flex;
            align-items: center;
            li {
                font-size: 0.14rem;
                flex: 1;
                text-align: center;
                img {
                    display: inline-block;
                    vertical-align: middle;
                    width: .225rem;
                    padding-right: .05rem;
                }
                span {
                    display: inline-block;
                    vertical-align: middle;
                    color: #fff;
                }
            }
        }
        // gruop
        .van-cell {
            padding: .1rem .12rem .15rem;
            background: #fff;
            line-height: 1.4;
            font-size: 0.13rem;
            word-wrap: break-word;
            .price {
                font-size: 0.2rem;
                color: #FF4A4A;
                font-weight: 700;
                small {
                    font-size: 0.12rem;
                    margin-right: 0.03rem;
                }
            }
            .name {
                font-weight: 700;
                color: #222;
                font-size: 0.17rem;
            }
            .slogn {
                margin-top: 0.05rem;
                color: #ff4a4a;
            }
            .details {
                margin-top: 0.05rem;
            }
            .tip {
                margin-top: .1rem;
                font-size: .12rem;
                line-height: .16rem;
                color: #999;
                white-space:normal;
            }
        }
        .cardBox {
            margin-top: .1rem;
            line-height: 1!important;
            .card {
                display: flex;
                align-items: center;
                padding: .1rem .12rem;
                background: #fff;
                .vertical {
                    font-size: 0.13rem;
                    color: #999;
                    flex: 0 0 0.4rem;
                    align-self: flex-start;
                }
                .cont {
                    flex: 1 auto;
                    padding-left: 0.05rem;
                    font-size: 0.13rem;
                    text-align: left;
                    .tag {
                        padding: 0 .04rem;
                        border-radius: 0.08rem;
                        border: 1px solid #ff706a;
                        color: #ff706a;
                        display: inline-block;
                        font-size: 0.12rem;
                        height: 0.14rem;
                        line-height: 0.14rem;
                        margin-right: .1rem;
                    }
                    p:nth-child(1) {
                        margin-bottom: 0.05rem;
                    }
                    .txt {
                        width: 2.8rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        display: inline-block;
                    }
                    .packings {
                        span {
                            font-size: 0.14rem;
                            font-weight: 700;
                            padding-right: .1rem;
                        }
                    }
                    .server-list {
                        span {
                            margin: 0 .07rem .04rem 0;
                            padding-right: .07rem;
                            border-right: 1px solid #222;
                            white-space: normal;
                        }
                    }
                }
                .icon {
                    flex: 0 0 0.25rem;
                    align-self: flex-start;
                    text-align: right;
                }
            }
        }
    }
</style>
